<div class="product-info-box">
    <div class="product-essential">
        <div class="product-img-box">
            <p class="product-image-zoom">
                <img style="height: 250px !important; width: auto !important;" src="<?php echo $this->baseUrl('/upload/') . $this->data['image']; ?>" alt="<?php echo $this->data['name']; ?>" title="<?php echo $this->data['name']; ?>" />
            </p>
            
            <!--<div class="img-slider">
                <a href="#" title="Prev" class="prev slider-btn">
                    <img src="<?php echo $this->templateURL; ?>/images/prev_img_btn.png" title="Prev" alt="Prev" />
                </a>
                <a href="#" title="Next" class="next slider-btn">
                    <img src="<?php echo $this->templateURL; ?>/images/next_img_btn.png" title="Next" alt="Next" />
                </a>
                <ul id="moreView">
                    <li>
                        <a class="ajax" href="<?php echo $this->templateURL; ?>/images/view_img.png">
                            <img src="<?php echo $this->templateURL; ?>/images/small_img.png" alt="" title="" />
                        </a>
                    </li>
                    <li>
                        <a class="ajax" href="<?php echo $this->templateURL; ?>/images/view_img.png">
                            <img src="<?php echo $this->templateURL; ?>/images/small_img.png" alt="" title="" />
                        </a>
                    </li>
                </ul>
            </div>-->
        </div>
        <div class="product-shop">
            <h3 class="product-name"><?php echo $this->data['name']; ?></h3>
            <div class="price-box">
                <span class="price"><?php echo number_format($this->data['price'], 0, null, "."); ?>đ</span>
            </div>
            <div class="model-block">
                <p>
                    <span><?php echo $this->translate('brand') ?>: </span><?php echo $this->data['brand']; ?>
                </p>
            </div>
            <div class="color-size-block">
                <!--<div class="label-row">
                    <label><em>*</em> color</label>
                    <span class="required">* Required Fields</span>
                </div>
                <div class="select-row">
                    <select>
                        <option></option>
                    </select>
                </div>
                <div class="label-row">
                    <label><em>*</em> size</label>
                </div>
                <div class="select-row">
                    <select>
                        <option></option>
                    </select>
                </div>-->
            </div>
            <div class="add-to-cart-box">
                <span class="qty-box">
					<label for="qty"><?php echo $this->translate('quantity') ?>:</label>
					<a href="javascript:void(0)" title="" class="prev add"><img src="<?php echo $this->templateURL; ?>/images/qty_prev.png" title="" alt="add" />‹</a>
					<input type="text" value="1" maxlength="12" id="qty" class="input-text qty" name="qty" />
					<a href="javascript:void(0)" title="" class="next dec add"><img src="<?php echo $this->templateURL; ?>/images/qty_next.png" title="" alt="" />›</a>
				</span>
                <script type="text/javascript">
jQuery(document)
    .ready(function () {
        jQuery(".ajax")
            .colorbox();
    });
jQuery(function () {
    jQuery(".add")
        .click(function () {
            var jQueryadd = jQuery(this);
            var oldValue = jQueryadd.parent()
                .find("input")
                .val();
            var newVal = 0;

            if (jQueryadd.text() == "›") {
                newVal = parseFloat(oldValue) + 1;
                // AJAX save would go here
            } else {
                // Don't allow decrementing below zero
                if (oldValue >= 1) {
                    newVal = parseFloat(oldValue) - 1;
                    // AJAX save would go here
                }
                if (oldValue == 1) {
                    newVal = parseFloat(oldValue);
                }
            }
            jQueryadd.parent()
                .find("input")
                .val(newVal);
        });


});
                </script>
                <button onclick="<?php if($this->data['quantity'] >= $this->page('out_of_stock_level')): ?>addToCart()<?php endif; ?>" class="form-button" title="<?php echo $this->translate('add to cart') ?>">
                    <span>
                        <?php if($this->data['quantity'] >= $this->page('out_of_stock_level')): ?>
                            <?php echo $this->translate('add to cart'); ?>
                        <?php else: ?>
                            <?php echo $this->translate('out of stock'); ?>
                        <?php endif; ?>
                    </span>
                </button>
                <script>
                    function addToCart(){
                        var qty = $("input#qty").val();
                        
                        $.ajax({
                            url: "<?php echo $this->url(array(), 'addCart', true); ?>",
                            data: {'id': <?php echo $this->data['id']; ?>, 'qty': qty, 'price': <?php echo $this->data['price']; ?>},
                            success: function callback(e){
                                alert('<?php echo $this->translate('add to cart success') ?>');
                                loadCart();
                            }
                        });
                    }
                </script>
                <!--<ul class="add-to-box">
                    <li><a href="#" title="Add to Wishlist" class="add-wishlist">Add to Wishlist</a>
                    </li>
                    <li><a href="#" title="Add to Compare" class="add-compare">Add to Compare</a>
                    </li>
                    <li><a href="#" title="Email to a Friend" class="email-friend">Email to a Friend</a>
                    </li>
                    <li class="last"><a href="<?php echo $this->templateURL; ?>/images/size_chart.gif" title="Size Guide" class="size-guide ajax">Size Guide</a>
                    </li>
                </ul>-->
            </div>
            <div class="color-size-block">
                <?php foreach($this->banner('how to payment') as $data): ?>
                    <img style="margin-top: 30px;" src="<?php echo $this->baseUrl('/upload/') . $data->image; ?>" />
                <?php endforeach; ?>
            </div>
        </div>
    </div>
</div>
<aside class="right">
    <ul class="right-img">
        <?php foreach($this->banner('product detail', 2) as $data): ?>
        <li>
            <a style="border: 1px solid #c9c9c9;" href="<?php echo $data->link; ?>" title="<?php echo $data->name; ?>">
                <img src="<?php echo $this->baseUrl('/upload/') . $data->image; ?>" title="<?php echo $data->name; ?>" alt="<?php echo $data->name; ?>" />
            </a>
        </li>
        <?php endforeach; ?>
    </ul>
</aside>
<section class="product-collateral">
    <script type="text/javascript">
$(function () {
    var tabContainers = $(
        'section.product-collateral > div.commonContent');
    tabContainers.hide()
        .filter(':first')
        .show();
    $('section.product-collateral ul.tab-block a')
        .click(function () {
            tabContainers.hide();
            tabContainers.filter(this.hash)
                .show();
            $('section.product-collateral ul.tab-block a')
                .removeClass('active');
            $(this)
                .addClass('active');
            return false;
        })
        .filter(':first')
        .click();
});
    </script>
    <ul class="tab-block">
        <li><a href="#pro-detail" title="<?php echo $this->translate('description') ?>" class="active"><?php echo $this->translate('description') ?></a>
        </li>
        <!--<li><a href="#pro-review" title="<?php echo $this->translate('reviews') ?>"><?php echo $this->translate('reviews') ?></a>
        </li>-->
    </ul>
    <div id="pro-detail" class="pro-detail commonContent">
        <?php echo $this->data['description']; ?>
    </div>

    <!--<div id="pro-review" class="pro-detail commonContent">
        <div id="fb-root"></div>
        <script>(function(d, s, id) {
          var js, fjs = d.getElementsByTagName(s)[0];
          if (d.getElementById(id)) return;
          js = d.createElement(s); js.id = id;
          js.src = "//connect.facebook.net/en_GB/sdk.js#xfbml=1&version=v2.0";
          fjs.parentNode.insertBefore(js, fjs);
        }(document, 'script', 'facebook-jssdk'));</script>
        <div id="fb-root"></div>
        <div class="fb-comments" data-href="http://localhost<?php echo $this->url(array('name' => $this->ConvertStringToURL($this->data['name']), 'id' => $this->data['id']), 'product_detail', true); ?>" data-numposts="10" data-width="100%" data-colorscheme="light"></div>
    </div>-->
</section>
<div class="like-pro-block">
    <div class="title-block">
        <h2><?php echo $this->translate('related product') ?></h2>
    </div>
    <div class="like-pro">
        <ul id="like-pro" class="product-grid">
            <?php foreach($this->relatedData as $data): ?>
            <li>
                <div class="pro-img">
                    <a href="<?php echo $this->url(array('name' => $this->ConvertStringToURL($data->name), 'id' => $data->id), 'product_detail', true) ?>">
                        <img style="width: 170px !important; height: auto !important;" title="<?php echo $data->name; ?>" alt="<?php echo $data->name; ?>" src="<?php echo $this->baseUrl('/upload/') . $data->image; ?>"
                    />
                    </a>
                </div>
                <div class="pro-detail-block">
                    <h4 class="pro-name">
                        <a href="<?php echo $this->url(array('name' => $this->ConvertStringToURL($data->name), 'id' => $data->id), 'product_detail', true) ?>">
                            <?php echo $data->name; ?>
                        </a>
                    </h4>
                    <div class="pro-price"><?php echo number_format($data->price, 0, null, "."); ?>đ</div>
                </div>
            </li>
            <?php endforeach; ?>
        </ul>
    </div>
</div>
<div class="related-pro-block">
    <div class="title-block">
        <h2><?php echo $this->translate('other product') ?></h2>
    </div>
    <div class="related-pro">
        <ul id="related-pro" class="product-grid">
            <?php foreach($this->otherData as $data): ?>
            <li>
                <div class="pro-img">
                    <a href="<?php echo $this->url(array('name' => $this->ConvertStringToURL($data->name), 'id' => $data->id), 'product_detail', true) ?>">
                        <img style="width: 170px !important; height: auto !important;" title="<?php echo $data->name; ?>" alt="<?php echo $data->name; ?>" src="<?php echo $this->baseUrl('/upload/') . $data->image; ?>"
                    />
                    </a>
                </div>
                <div class="pro-detail-block">
                    <h4 class="pro-name">
                        <a href="<?php echo $this->url(array('name' => $this->ConvertStringToURL($data->name), 'id' => $data->id), 'product_detail', true) ?>">
                            <?php echo $data->name; ?>
                        </a>
                    </h4>
                    <div class="pro-price"><?php echo number_format($data->price, 0, null, "."); ?>đ</div>
                </div>
            </li>
            <?php endforeach; ?>
        </ul>
    </div>
</div>